<template>
  <div class="app-container">
    <!-- 操作 -->
    <div class="crud">
      <div class="crud-btn-container">
        <div class="crud-item crud-all" :class=" listQuery.acceptStatus == 0? 'crud-active':'' " @click="changeBtn(0)">全部
        </div>
        <div class="crud-item crud-wait" :class=" listQuery.acceptStatus == 1? 'crud-active':'' " @click="changeBtn(1)">待审批
        </div>
        <div class="crud-item crud-approve" :class=" listQuery.acceptStatus == 2? 'crud-active':'' " @click="changeBtn(2)">
          已审批</div>
        <div class="crud-item crud-unapprove" :class=" listQuery.acceptStatus == 3? 'crud-active':'' " @click="changeBtn(3)">
          未通过</div>
      </div>
      <!-- <div class="search">
        <el-input v-model="listQuery.keyword" placeholder="查找待审核用户" class="crud-input">
          <el-button class="search-btn" slot="append" icon="el-icon-search"  @keyup.enter.native="handleFilter" @click="handleFilter" />
        </el-input>
      </div> -->
    </div>

    <!-- 0 table表格 -->
    <el-table :key="tableKey" v-loading="listLoading" element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading" :data="list" border fit highlight-current-row
      :default-sort="{prop: 'SUBMIT_TIME', order: 'ascending'}">

      <el-table-column type="index" width="55" label="序号" />
      <el-table-column label="快递公司" align="center">
        <template slot-scope="{row}">
          <span>{{ row.company || '未选' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="区域" min-width="160px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.address || '未选' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="申请网点名" min-width="140px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.courierPointName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="申请人" min-width="140px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.realName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="SUBMIT_TIME" label="提交时间" min-width="130px" sortable align="center">
        <template slot-scope="{row}">
          <span>{{ row.submitTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="资料上传" align="center">
        <template slot-scope="{row}">
          <span>{{ row.uploadStatus==1? '是':'否' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="{row}">
          <span>{{ switch_status(row.acceptStatus) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="审批人" align="center">
        <template slot-scope="{row}">
          <span>{{ (row.acceptUserName||row.acceptUserRole)? (row.acceptUserName + '-' + row.acceptUserRole):'无' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100px" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <span class="action action-update"
            @click="row.acceptStatus==1? handleApprove2(row.userId, true) : handleApprove2(row.userId, false)">{{row.acceptStatus==1? '审批': '查看'}}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 1 分页 -->
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
      @pagination="getList" />

    <!-- 2 审批的弹框 -->
    <el-dialog title="上传信息" :visible.sync="dialogFormVisible" width="80%" :before-close="towreturn" :close-on-click-modal="false" center="">
      <div class="approve-info">
        <div class="user-info">
          <span class="subtitle user-item">用户信息</span>
          <span class="user-item">用户名: {{temp.name}}</span>
          <span class="user-item">邮箱: {{temp.email}}</span>
          <span class="user-item">注册电话: {{temp.phone}}</span>
          <span class="user-item">注册地区: {{temp.address}}</span>
          <span class="user-item">所属网点: {{temp.deptName}}</span>
          <span class="user-item">网点联系人: {{temp.contactMan}}</span>
          <span class="subtitle user-item">认证法人信息</span>
          <span class="user-item">法人姓名: {{temp.legalName}}</span>
          <span class="user-item">法人身份证: {{temp.legalIdCode}}</span>
          <span class="user-item">法人电话: {{temp.legalTel}}</span>
        </div>
        <div class="company-info">
          <span class="subtitle company-item">企业资质信息</span>
          <span class="company-item">企业全称: {{temp.companyName}}</span>
          <span class="company-item">所属地区: {{temp.address}}</span>
          <span class="company-item">所属公司: {{temp.company}}</span>
          <div class="company-item picture-list">
            <span>工商营业执照:</span>
            <el-image class="avatar" v-for="(itemurl,i) in license_list" :key="i" :src="itemurl"
              :preview-src-list="license_list" fit="cover"></el-image>
          </div>
          <span class="company-item">统一社会信用代码: {{temp.unifiedSocialCreditCode}}</span>
          <div class="company-item doc-list">
            <span>其他证明材料:</span>
            <div class="doc-container">
              <el-image class="avatar" v-for="(itemurl,i) in doc_list" :key="i" :src="itemurl"
              :preview-src-list="doc_list" fit="cover"></el-image>
              <!-- <el-image  style="width: 100px; height: 100px" src="@/assets/img/avatar.png"  :preview-src-list="picture_url(temp.pictures)"> </el-image> -->
            </div>
          </div>
        </div>
      </div>
      <!-- 1.审批 -->
      <div class="approve-suggest" v-show="the_status">
        <div class="distribute-container">
          <div class="approve-item item">
            <span class="item-title">审批意见: </span>
            <div>
              <el-radio v-model="temp.acceptStatus" :label="3">未通过</el-radio>
              <el-radio v-model="temp.acceptStatus" :label="2">通过</el-radio>
            </div>

          </div>
          <div class="approve-item item">
            <span class="item-title">角色分配: </span>
            <el-select v-model="temp_RoleIds" filterable reserve-keyword placeholder="角色资源分配" style="width: 100%" multiple clearable >
              <el-option v-for="item in list_role" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.disable"/>
            </el-select>
          </div>
          <div class="approve-item item">
            <span class="item-title">网点分配: </span>
            <el-select v-model="tempBranchIds" filterable reserve-keyword placeholder="网点资源分配" style="width: 100%" multiple clearable >
              <el-option v-for="item in list_resource2" :key="item.resGroupId" :label="item.resGroupName" :value="item.resGroupId" :disabled="item.disable"/>
            </el-select>
          </div>
          <div class="approve-item item">
            <span class="item-title">设备分配: </span>
            <el-select v-model="tempDeviceIds" filterable reserve-keyword placeholder="设备资源分配" style="width: 100%" multiple clearable >
                <el-option v-for="item in list_resource1" :key="item.resGroupId" :label="item.resGroupName" :value="item.resGroupId" :disabled="item.disable"/>
              </el-select>
          </div>



        </div>

        <div class="approve-remark">
          <div class="approve-remark-title">备注:</div>
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 5}" placeholder="请输入备注" v-model="temp.remark">
          </el-input>
        </div>
      </div>
      <!-- 2. 查看 -->
      <div class="approve-suggest" v-show="!the_status">
        <div class="distribute-container">
          <div class="approve-item item">
            <span v-show='temp.acceptStatus==1'>审批意见: 待审批</span>
            <span v-show='temp.acceptStatus==2'>审批意见: 通过</span>
            <span v-show='temp.acceptStatus==3'>审批意见: 未通过</span>
          </div>
          <div class="approve-item item">
            <div class="item-title">拥有角色: </div>
            <div class="tags-container">
              <el-tag type="primary" v-for="item in temp.roles" :key='item.roleId' size="mini">{{item.roleName}}</el-tag>
            </div>

          </div>
          <div class="approve-item item">
            <div class="item-title">拥有网点: </div>
            <div class="tags-container">
              <el-tag type="primary" v-for="item in temp.pointResGroups" :key='item.resGroupId' size="mini">{{item.resGroupName}}</el-tag>
            </div>
          </div>
          <div class="approve-item item">
            <div class="item-title">拥有设备: </div>
            <div class="tags-container">
              <el-tag type="primary" v-for="item in temp.deviceResGroups" :key='item.resGroupId' size="mini">{{item.resGroupName}}</el-tag>
            </div>
          </div>
        </div>

        <div class="approve-remark">
          <div class="approve-remark-title">备注: {{temp.remark}}</div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button class="plain-dialog-btn" @click="towreturn">返回</el-button>
        <el-button class="fill-dialog-btn" @click="commitApprove" v-show="the_status">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import waves from '@/directive/waves' // waves directive
  import {
    parseTime
  } from '@/utils' // 解析时间
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  import {
    userAdd,
    userDel,
    userUpdate,
    checkList,
    checkUserinfo,
    checkApproveNew,
    userSelectRole,
    resourceList
  } from '@/api/permission'

  import {
    validPass
  } from '@/utils/validate'
  import {
    logger
  } from 'runjs/lib/common'
  const calendarTypeOptions = [{
      key: 'CN',
      display_name: 'China'
    },
    {
      key: 'US',
      display_name: 'USA'
    },
    {
      key: 'JP',
      display_name: 'Japan'
    },
    {
      key: 'EU',
      display_name: 'Eurozone'
    }
  ]

  // arr to obj, such as { CN : "China", US : "USA" }
  const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
    acc[cur.key] = cur.display_name
    return acc
  }, {})

  export default {
    name: 'PermissionUser',
    components: {
      Pagination
    },
    directives: {
      waves
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'info',
          deleted: 'danger'
        }
        return statusMap[status]
      },
      typeFilter(type) {
        return calendarTypeKeyValue[type]
      }
    },
    data() {
      const validatePassword = (rule, value, callback) => {
        // if (!validPass(value) && (value && value.length != 64)) {
        if (!validPass(value)) {
          callback(new Error('8~16位,包含大小写字母和数字, 可以有特殊字符'))
        } else {
          callback()
        }
      }

      return {
        tableKey: 0,
        // list: null,
        list: [],
        total: 0, // 总条数
        listLoading: true,
        listQuery: {
          page: 1, // 第几页
          limit: 10, // 每页显示的条数row
          acceptStatus: 0,   // 0是查全部
          keyword: '' // 搜索关键字,
        },
        calendarTypeOptions,
        temp: {
          id: '',
          acceptStatus: '',
          remark: '',
          roleIds: [],
          resGroupIds: [],
          list_role_temp: [],
          list_resource1_temp: [],
          list_resource2_temp: [],
        },
        temp2: {},

        dialogFormVisible: false,
        dialogStatus: '',
        // 提交审批意见
        // temp_id: '',
        // temp_remark: '',
        license_list: [],
        doc_list: [],

        list_role: [], // 角色列表
        list_resource: [], // 资源组列表
        list_resource2: [], // 网点资源组列表
        list_resource1: [], // 设备资源组列表

        the_status: false,
        
        // 选择的角色，网点，设备
        temp_RoleIds: [],
        tempDeviceIds: [],
        tempBranchIds: [],

        // 当前登录用户id
        CurrentUser: ''
      }
    },
    watch: {},
    created() {
      this.getList()
      this.getRoleList()
      this.getResourceList()
      this.getCurrentUser()
    },
    computed: {
      switch_status() {
        return (sta) => {
          if (sta == 1) return '待审批'
          else if (sta == 2) return '已通过'
          else if (sta == 3) return '未通过'
        }
      },
      picture_url() {
        return (arr) => {
          if (arr && arr.length > 0) {
            let newarr = arr.map((item, index) => {
              return '/api' + item.pictureUrl
            })
            return newarr
          }
        }
      }
    },
    methods: {
      // 获取当前用户id
      getCurrentUser() {
        checkUserinfo().then(res => {
          console.log('当前登录的用户 :>> ', res.data.userId)
          this.CurrentUser = res.data.userId
        })
      },
      // 获取 table 列表
      getList() {
        this.listLoading = true
        checkList({
          pageNo: this.listQuery.page,
          pageSize: this.listQuery.limit,
          acceptStatus: this.listQuery.acceptStatus,
        })
        .then(res => {
          if (res.code == 0) {
            this.list = res.list
            this.total = parseInt(res.total)
            this.listLoading = false
          } 
          else {
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }
        })

      },
      // 点击了状态切换
      changeBtn(num) {
        this.listQuery.acceptStatus = num
        this.getList()
      },
      
      // 编辑时处理 当前用户 已拥有和未有的 角色 网点资源 设备资源---结合---------------------------
      constructPull(row) {
        this.temp_RoleIds = []
        this.tempBranchIds = []
        this.tempDeviceIds = []
        this.inlineEditRole(row)
        this.inlineEditBranch(row)
        this.inlineEditDevice(row)
      },
      inlineEditRole(row) {
        row.list_role_temp = [...this.list_role]
        
        if(row.roles) row.roles.map((val, index2) => {
          let flag = true
          this.list_role.forEach((val2, index3) => {
            if(val.roleId == val2.roleId) {   // 两数组均有
              flag = false
              this.temp_RoleIds.push(val2.roleId)
            }
          })
          if(flag) {   // 当前登录者没有的 角色组
            row.list_role_temp.push({roleId: val.roleId, roleName: val.roleName, disable: true})
            this.temp_RoleIds.push(val.roleId)
          }

        })
      },
      inlineEditBranch(row) {
        row.list_resource2_temp = [...this.list_resource2]
        
        if(row.pointResGroups) row.pointResGroups.map((val, index2) => {
          let flag = true
          this.list_resource2.forEach((val2, index3) => {
            if(val.resGroupId == val2.resGroupId) {   // 两数组均有
              flag = false
              this.tempBranchIds.push(val2.resGroupId)
            }
          })
          if(flag) {   // 当前登录者没有的(网点资源组)
            row.list_resource2_temp.push({roleId: val.resGroupId, roleName: val.resGroupName, disable: true})
            this.tempBranchIds.push(val.resGroupId)
          }

        })
      },
      inlineEditDevice(row) {
        row.list_resource1_temp = [...this.list_resource1]
        
        if(row.deviceResGroups) row.deviceResGroups.map((val, index2) => {
          let flag = true
          this.list_resource1.forEach((val2, index3) => {
            if(val.resGroupId == val2.resGroupId) {   // 两数组均有
              flag = false
              this.tempDeviceIds.push(val2.resGroupId)
            }
          })
          if(flag) {   // 当前登录者没有(设备资源组)
            row.list_resource1_temp.push({roleId: val.resGroupId, roleName: val.resGroupName, disable: true})
            this.tempDeviceIds.push(val.resGroupId)
          }

        })
      },
      towreturn() {
        this.dialogFormVisible = false
        this.license_list = []
        this.doc_list = []
      },

      // 审批
      // handleApprove(id, status) {
      //   console.log('传的id是谁的 :>>', id)
      //   this.the_status = status
      //   // 用于判断可以给予权限
      //   checkUserinfo().then(res => { // d608a8c298cf4805a12fcf985841d791
      //     // checkUserinfo({id: 'd608a8c298cf4805a12fcf985841d791'}).then(res => {   // d608a8c298cf4805a12fcf985841d791
      //     if (res.code == 0) {
      //       this.temp2 = res.data
      //       console.log('当前登录角色信息 :>> ', res.data)
      //       // this.temp2.id = id
      //       // this.temp.list_role_temp = []
      //       // this.temp.list_resource1_temp = []
      //       // this.temp.list_resource2_temp = []

      //       console.log('this.temp :>> ', this.temp2);
            
      //       // this.constructPull(this.temp)

      //       // if (res.data.pictures && res.data.pictures.length > 0) {
      //       //   res.data.pictures.forEach((item, i) => {
      //       //     if (item.type =='front' || item.type == 'back') this.license_list.push("http://" + item.pictureUrl)
      //       //     if (item.type == 'credential') this.doc_list.push("http://" + item.pictureUrl)

      //       //     // console.log('1 :>> ', this.license_list)
      //       //     // console.log('2 :>> ', this.doc_list)
      //       //   })
      //       // }
      //     } else {
      //       this.$message({
      //         message: '获取信息失败',
      //         type: 'error'
      //       })
      //     }
      //   }).catch(res => {
      //     this.$message({
      //       message: '网络错误',
      //       type: 'error'
      //     })
      //   })

      //   // 拿这个工单的详情
      //   checkUserinfo({ id: id }).then(res => { // d608a8c298cf4805a12fcf985841d791
      //     // checkUserinfo({id: 'd608a8c298cf4805a12fcf985841d791'}).then(res => {   // d608a8c298cf4805a12fcf985841d791
      //     if (res.code == 0) {
      //       this.temp = res.data
      //       console.log('数据 :>> ', this.temp)
      //       this.temp.id = id
      //       // this.temp.list_role_temp = []
      //       // this.temp.list_resource1_temp = []
      //       // this.temp.list_resource2_temp = []
            
      //       // this.constructPull(this.temp)

      //       if (res.data.pictures && res.data.pictures.length > 0) {
      //         res.data.pictures.forEach((item, i) => {
      //           if (item.type =='front' || item.type == 'back') this.license_list.push("http://" + item.pictureUrl)
      //           if (item.type == 'credential') this.doc_list.push("http://" + item.pictureUrl)

      //           // console.log('1 :>> ', this.license_list)
      //           // console.log('2 :>> ', this.doc_list)
      //         })
      //       }
      //     } else {
      //       this.$message({
      //         message: '获取信息失败',
      //         type: 'error'
      //       })
      //     }
      //   }).catch(res => {
      //     this.$message({
      //       message: '网络错误',
      //       type: 'error'
      //     })
      //   })

      //   this.dialogFormVisible = true
      // },
      // 查看
      handleApprove2(id, status) {
        console.log('传的id是谁的 :>>', id)
        this.the_status = status
        // 用于判断可以给予权限
        checkUserinfo({ id: id }).then(res => { // d608a8c298cf4805a12fcf985841d791
          // checkUserinfo({id: 'd608a8c298cf4805a12fcf985841d791'}).then(res => {   // d608a8c298cf4805a12fcf985841d791
          if (res.code == 0) {
            this.temp = res.data
            console.log('数据 :>> ', this.temp)
            this.temp.id = id
            // this.temp.list_role_temp = []
            // this.temp.list_resource1_temp = []
            // this.temp.list_resource2_temp = []
            
            // this.constructPull(this.temp)

            if (res.data.pictures && res.data.pictures.length > 0) {
              res.data.pictures.forEach((item, i) => {
                if (item.type =='front' || item.type == 'back') this.license_list.push("http://" + item.pictureUrl)
                if (item.type == 'credential') this.doc_list.push("http://" + item.pictureUrl)

                // console.log('1 :>> ', this.license_list)
                // console.log('2 :>> ', this.doc_list)
              })
            }
          } else {
            this.$message({
              message: '获取信息失败',
              type: 'error'
            })
          }
        }).catch(res => {
          this.$message({
            message: '网络错误',
            type: 'error'
          })
        })

        this.dialogFormVisible = true
      },
      // 提交了审核
      commitApprove() {
        this.temp.resGroupIds = [...this.tempDeviceIds, ...this.tempBranchIds]
        this.temp.roleIds = [...this.temp_RoleIds]
        if (this.temp.acceptStatus != 2 && this.temp.acceptStatus != 3) {
          this.$message({
            message: '请选择审批意见',
            type: 'error'
          })
        } 
        else {
          // console.log('审核通过的数据 :>> ', this.temp_RoleIds)
          
          checkApproveNew(
            // this.temp
            {
              id: this.temp.id,
              acceptStatus: this.temp.acceptStatus,
              remark: this.temp.remark,
              acceptUserId: this.CurrentUser,
              resGroupIds: this.tempDeviceIds.concat(this.tempBranchIds),
              roleIds: this.temp_RoleIds
            }
          ).then(res => {
            if (res.code == 0) {
              this.$message({
                message: '提交成功',
                type: 'success'
              })
              this.dialogFormVisible = false
              this.getList()
              this.license_list = []
              this.doc_list = []
            } else {
              this.$message({
                message: '提交失败',
                type: 'error'
              })
            }
          }).catch(res => {
            this.$message({
              message: '网络错误',
              type: 'error'
            })
          })
        }

      },
      // 获取角色列表 (下拉回显)
      getRoleList() {
        userSelectRole().then(res => {
          let tempList = res.data || []
          this.list_role = []
          tempList.forEach((item) => {
            this.list_role.push({roleId: item.id, roleName: item.name, disable: false})
          })
          // console.log('用户权限 :>> ', this.list_role)
        })
      },
      // 获取资源组列表 (下拉回显)
      getResourceList() {
        resourceList().then(res => {
          console.log('资源组 :>> ', res)
          this.list_resource = res.data || []

          this.list_resource.forEach((item) => {
            if(item.groupType == 2) {
              this.list_resource2.push({resGroupId: item.id, resGroupName: item.name, disable: false})
            }
            else if(item.groupType == 1) {
              this.list_resource1.push({resGroupId: item.id, resGroupName: item.name, disable: false})
            }
          })

          // console.log('网点资源组列表 :>> ', this.list_resource2)
          // console.log('设备资源组列表 :>> ', this.list_resource1)
          

          // this.list_resource2 = this.list_resource.filter((item) => {
          //   return item.groupType == 2;
          // });
          // this.list_resource1 = this.list_resource.filter((item) => {
          //   return item.groupType == 1;
          // });
        })
      },



    }
  }
</script>

<style lang="scss">
  @import "~@/styles/variables.scss";

  .crud-input {

    // border: 0;
    &.el-input--medium {
      font-size: 12px;
    }

    &.el-input--medium .el-input__inner {
      height: 27px !important;
      background: transparent;
      border: 0;
      -webkit-appearance: none;
      border-radius: 3px;
      // padding: 12px 5px 12px 15px;
      color: $text_dark;
      caret-color: $text_dark;

      &:-webkit-autofill {
        box-shadow: 0 0 0 1000px $my_opacity inset !important;
        -webkit-text-fill-color: $text_dark !important;
      }
    }

    // .el-input-group__append {
    //   color: var(--app_primary);
    //   border: 0;
    //   border-left: 1px solid var(--app_primary);

    //   .el-button {
    //     height: 27px;
    //     border: 1px solid $my_primary !important;
    //     background-color: #f11;
    //   }
    // }
  }

  // 单选框 radio
  // .el-radio.is-checked .el-radio__label {
  //   color: var(--app_primary);
  // }
  // .el-radio.is-checked .el-radio__input.is-checked .el-radio__inner {
  //   border-color: var(--app_primary);
  //   background-color: var(--app_primary);
  // }
  // .el-radio:not(.is-checked) .el-radio__input:not(.is-checked) .el-radio__inner:hover {
  //   border-color: var(--app_primary);
  // }

  // 多行文本编辑框
  // .el-textarea .el-textarea__inner:focus {
  //   border-color: var(--app_primary);
  // }


  .el-dialog {
    .el-dialog__header {
      background-color: #f5f7f5 !important;
      // .el-dialog__headerbtn .el-dialog__close:hover {
      //   color: var(--app_primary);
      // }
    }
  }

  .el-form-item__label {
    // 两端对齐
    display: flex;
    justify-content: space-between;
    align-items: center !important;

    &::before {
      transform: translateY(3px);
    }

    .form-item-label {
      flex: 1;
      text-align-last: justify !important;
      text-align: justify !important;
    }
  }
</style>


<style lang="scss" scoped>
  @import "~@/styles/variables.scss";

  .app-container {
    padding: 10px;
    background-color: #ffffff;

    .crud {
      margin-bottom: 32px;
      display: flex;
      justify-content: space-between;
      // background-color: antiquewhite;

      .crud-btn-container {
        font-size: 13px;
        display: flex;
        justify-content: space-between;
        // align-items: center;
        border: 1px solid var(--app_primary);
        border-radius: 3px;

        .crud-item {
          color: var(--app_primary);
          cursor: pointer;
          padding: 0 10px;
          line-height: 27px;
          border-right: 1px solid var(--app_primary);
        }

        .crud-unapprove {
          border: none;
        }

        .crud-active {
          background-color: var(--app_primary);
          color: $my_white;

          &.crud-all {
            transform: translateX(-1px);
          }
        }
      }

      .crud-input {
        height: 27px;
        width: 300px;
        border: 1px solid var(--app_primary);
        border-radius: 3px;
        // background-color: aqua;
      }
    }


    // background-color: #f99 !important;
    .el-table {
      .action {
        font-size: 13px;
        color: var(--app_primary);
        cursor: pointer;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    .el-dialog {
      .approve-info {
        display: flex;
        justify-content: space-between;

        .user-info,
        .company-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          padding: 0 30px;
        }

        .user-info {
          border-right: 1px solid $border_middle;
        }

        .user-item,
        .company-item {
          margin-bottom: 15px;
        }

        .subtitle {
          font-weight: 700;
          font-size: 15px;
        }

        .company-info {
          & .picture-list {
            // width: 100%;
            display: flex;
            align-items: center;
            overflow: hidden;
            flex-wrap: wrap;

            &>span {
              margin-right: 10px;
            }

            .avatar {
              width: 100px;
              height: 100px;
              margin-right: 10px;
            }
          }
          & .doc-list {
            .doc-container {
              // width: 100%;
              padding: 10px 0 0 30px;
              display: flex;
              align-items: center;
              overflow: hidden;
              flex-wrap: wrap;
              .avatar {
                width: 100px;
                height: 100px;
                margin: 0 10px 10px 0;
              }
            }
          }
        }
      }

      .approve-suggest {
        margin-top: 15px;

        // background-color: #dff;
        .distribute-container {
          // background-color: #ff4;
          margin-bottom: 15px;

          .approve-item {
            margin-bottom: 10px;
            display: flex;
            justify-content: flex-startss;
            align-items: center;

            .item-title {
              font-size: 14px;
              font-weight: 600;
              width: 70px;
              min-width: 70px;
            }

            .tags-container {
              display: inline-flex;
              flex-wrap: wrap;

              .el-tag {
                margin: 0 10px 10px 0;
              }
            }

            .el-select {
              flex: 1;
            }

            // span {
            //   font-size: 14px;
            //   font-weight: 600;
            //   margin-right: 10px;
            // }
          }
        }

        .approve-remark {
          display: flex;
          justify-content: space-between;

          .approve-remark-title {
            font-size: 14px;
            min-width: 42px;
            font-weight: 600;
            width: 70px;
          }
        }
      }


      .del-data {
        text-align: center;
        margin-bottom: 16px;

        img {
          width: 130px;
          height: 110px;
        }
      }

      .del-img {}
    }
  }
</style>
